<template>
  <el-row class="DetailDrawer">
    <commonDrawer
      title="黑名单详情"
      :drawer="drawer"
      :size="'600px'"
      :isShowMoreBtn="false"
      @closeDraw="closeDraw"
    >
      <template slot="column">
        <div class="range-area">
          <div class="textgroup">
            <div class="title">客户姓名</div>
            <div class="text">{{ data.visitorName || '' }}</div>
          </div>
          <div class="textgroup">
            <div class="title">封禁次数</div>
            <div class="text">{{ data.blackNum || 1 }}</div>
          </div>
          <div class="textgroup">
            <div class="title">封禁时间</div>
            <div class="text">{{ data.blackTime || '' }}</div>
          </div>
          <div class="textgroup">
            <div class="title">上次解封时间</div>
            <div class="text">{{ data.lastDeblackTime || '' }}</div>
          </div>
          <div class="textgroup" style="width:100%">
            <div class="title">会话记录ID</div>
            <div class="text">{{ data.sessionId }} <i class="V7_iconfont V7_iconV7tubiao_fuzhi disabledIcon" v-copy="data.sessionId"></i></div>
          </div>
          <div class="textgroup">
            <div class="title">操作坐席</div>
            <div class="text">{{ data.account }}</div>
          </div>
          <div class="textgroup">
            <div class="title">封禁类型</div>
            <div class="text">{{ data.type }}</div>
          </div>
          <div class="textgroup">
            <div class="title">访客IP</div>
            <div class="text">{{ data.ip }}</div>
          </div>
          <div class="textgroup" style="width:100%">
            <div class="title">拉黑原因</div>
            <div class="text">{{ data.blackReason }}</div>
          </div>
           <div class="textgroup">
            <div class="title">申请解封</div>
            <div class="text">{{ data.isApplyDeblack }}</div>
          </div>
          <div class="textgroup">
            <div class="title">申请解封时间</div>
            <div class="text">{{ data.applyDeblackTime || '' }}</div>
          </div>
        </div>
        <div class="publicBtn" v-if="!data.block">
          <el-button size="mini" @click="closeDraw">取消</el-button>
          <el-button size="mini" type="danger" @click="submit">解封</el-button>
        </div>
      </template>
    </commonDrawer>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import commonDrawer from '@/common/views/drawer/index.vue';
import { commonAction } from '@/utils/common';
@Component({
  name: 'DetailDrawer',
  components: {
    commonDrawer
  }
})
export default class DetailDrawer extends Vue {
  [x: string]: any
  private drawer: boolean = false
  private data: any = {}

  private loading: boolean = false

  private async getData () {
    this.loading = true;
  }

  private openDraw (data: any) {
    this.drawer = true;
    this.data = data
  }

  private closeDraw () {
    this.drawer = false;
    this.data = {}
  }

  private async submit () {
    const params = { url: '/im-center/action/blacklist/untieVisitor', method: 'POST', data: { _ids: [this.data._id] } }
    const result: any = await commonAction(params)
    if (result.success) {
      this.$message.success('操作成功')
      this.closeDraw()
      this.$emit('getData');
    }
  }
}
</script>

<style lang="stylus" scoped>
.DetailDrawer
  .publicBtn
    width calc(100% - 48px)
    position absolute
    bottom 0px
    height 56px
    line-height 56px
    background #fff
    text-align right
    z-index 100
  .range-area
    position absolute
    height calc(100% - 132px)
    width calc(100% - 48px)
    overflow: auto
    .textgroup
      width: 50%
      float: left
      margin-bottom: 20px
      font-size: 12px
      font-weight: 400
      .title
        color: #303753
        margin-bottom: 7px
      .text
        color: #686E84
        line-height: 20px
        overflow: hidden
        i
          font-size:12px
          color:#B3B9C7
          margin-left:8px
          cursor:pointer
        i:hover
          color $c-main
</style>
